<template>
    <div id="st-header">
        <el-menu :default-active="activeIndex2" 
        mode="horizontal" 
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b" 
        @select="handleSelect"
        unique-opened
        menu-trigger="click">
            <el-submenu index="1">
                <template slot="title"><i class="el-icon-document"></i>文件</template>
                <el-menu-item index="1-1" @click="openDialog('stNewFile',true)">
                   <i class="fa fa-file-o"> &nbsp;</i> 新建文件
                </el-menu-item>
                <el-menu-item index="1-2" @click="openDialog('stOpenFile',true)">
                   <i class="fa fa-folder-open-o"> &nbsp;</i>打开文件
                </el-menu-item>

                <el-menu-item index="1-3" @click="openDialog('stTemplate',true)">
                   <i class="fa fa-folder-open-o"> &nbsp;</i>模板
                </el-menu-item>

                <el-menu-item index="1-4"  @click="openDialog('stSaveFile',true)">
                    <i class="fa fa-save"> &nbsp;</i> 保存
                </el-menu-item>
                <el-menu-item index="1-5"  @click="openDialog('stSaveAs',true)">
                    <i class="fa fa-save"> &nbsp;</i> 另存为
                </el-menu-item>

                <el-menu-item index="1-6" @click="openDialog('stDownFile',true)">
                    <i class="fa fa-download"> &nbsp;</i> 导出
                </el-menu-item>
            </el-submenu>
            <el-submenu index="2">
                <template slot="title"><i class="el-icon-edit"></i> 编辑</template>
                <el-menu-item index="2-1" @click="getCurrentActiveTable.hs.undo()">
                    <i class="fa fa-undo"> &nbsp;</i> 撤销
                </el-menu-item>
                <el-menu-item index="2-2" @click="getCurrentActiveTable.hs.redo()">
                    <i class="fa fa-rotate-right"> &nbsp;</i> 重做
                </el-menu-item>
                <el-menu-item index="2-3" @click="getCurrentActiveTable.hs.getPlugin('CopyPaste').cut()">
                    <i class="fa fa-cut"> &nbsp;</i> 剪切
                </el-menu-item>
                <el-menu-item index="2-4" @click="getCurrentActiveTable.hs.getPlugin('CopyPaste').copy()">
                    <i class="fa fa-copy"> &nbsp;</i> 复制
                </el-menu-item>
                <el-menu-item index="2-5" @click="getCurrentActiveTable.hs.getPlugin('CopyPaste').paste('CTRL+V')">
                    <i class="fa fa-paste"> &nbsp;</i> 粘贴
                </el-menu-item>

            </el-submenu>
            <el-submenu index="3">
                <template slot="title"><i class="el-icon-setting"></i> 设置 </template>
                <el-menu-item index="3-1" @click="openDialog('stTableSettings',true)">
                    <i class="fa fa-table"> &nbsp;</i> 表格设置
                </el-menu-item>
                 <el-menu-item index="3-2" >
                    <i class="fa fa-table"> &nbsp;</i> 权限设置
                </el-menu-item>
            </el-submenu>

            <el-submenu index="4">
                <template slot="title"><i class="fa fa-plug">&nbsp;</i> 扩展 </template>
                <el-menu-item index="4-1" @click="openDialog('stPredefine',true)">
                    <i class="fa fa-subscript"> &nbsp;</i> 预定义变量
                </el-menu-item>
                <el-menu-item index="4-2" @click="openDialog('stPreEdit',true)">
                    <i class="fa fa-chain"> &nbsp;</i> 变量绑定器
                </el-menu-item>
            </el-submenu>

            <el-submenu index="5">
                <template slot="title"><i class="el-icon-info"></i> 帮助</template>
                <el-menu-item index="5-1">
                    <i class="fa fa-about"> &nbsp;</i> 版本日志
                </el-menu-item>
            </el-submenu> 

            <!-- 用户认证 -->
            <st-auth></st-auth>
            
        </el-menu>

        <!-- 以下为弹窗控件 -->
        <st-new-file></st-new-file>
        <st-open-file></st-open-file>
        <st-save-file></st-save-file>
        <st-table-settings></st-table-settings>
        <st-down-file></st-down-file>
        <st-predefine></st-predefine>
        <st-template></st-template>
        <st-pre-edit></st-pre-edit>
        <st-save-as></st-save-as>
        <auth></auth>
        <!-- end -->
        
    </div>
</template>

<script>

import stNewFile from './Dialog/stNewFile.vue';
import stOpenFile from './Dialog/stOpenFile.vue';
import stSaveFile from './Dialog/stSaveFile.vue';
import stTableSettings from './Dialog/stTableSettings.vue';
import stDownFile from './Dialog/stDownFile.vue';
import stPredefine from './Dialog/stPredefine.vue';
import stTemplate from './Dialog/stTemplate.vue';
import stPreEdit from './Dialog/stPreEdit.vue';
import stSaveAs from './Dialog/stSaveAs.vue';
import stAuth from './Auth/stAuth.vue';
import Auth from "./Auth/stLogin.vue";

import {mapGetters,mapMutations} from 'vuex';
export default {
    data() {
        return {
            activeIndex: '1',
            activeIndex2: '1',
            currentTable:'',
        };
    },
    updated(){
        
    },
    computed:{
        ...mapGetters(['getCurrentActiveTable']),
    },
    mounted(){
       
        
    },
    methods: {
        ...mapMutations(['setDialogStatus']),
        handleSelect(key, keyPath) {

        },
        openDialog(key,value){
            this.setDialogStatus({
               key:key,
               value:value
            });
        },
    },
    components:{
        stNewFile,
        stOpenFile,
        stSaveFile,
        stSaveAs,
        stTableSettings,
        stDownFile,
        stPredefine,
        stTemplate,
        stPreEdit,
        stAuth,
        Auth,
    }
};

</script>

<style rel="stylesheet/scss" lang="scss">
    
</style>
